<template>
  <div class="carnbon-container">

    <el-breadcrumb separator="/" style="padding:0px 20px 10px">
      <el-breadcrumb-item>流程管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/bpmMgr/reducer'">减排措施</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="list">
      <CustomTableTwo
              id="authList"
              class="auth-list"
              :table-config="tableConfig"
              :is-show-pagination="false"
              :search-callback="searchCallback"
              :is-refresh="isRefresh"
              :isShowSelect="false"
      >
      </CustomTableTwo>
    </div>

    <addForm ref="addFormRef" @done="handleOk" />
    <editForm ref="editFormRef" @done="handleOk" />
  </div>
</template>
<script setup lang="ts">
  import { appAuthList, appBacthPass, appDeny, appPass } from '@/ajax/index';
  import CustomTableTwo from '@/components/CustomTableTwo.vue';
  import addForm from './addForm.vue'
  import editForm from './editForm.vue'
  import { dateFormat, FormatsEnums } from '@/utils/dateUtil';
  import { getCurrentInstance, ref } from 'vue';
  import { useRouter } from 'vue-router';
  const { ctx , proxy } = getCurrentInstance() as any;

  let router = useRouter()

  const tableConfig = ref({})
  const isRefresh = ref(false)
  
  const addFormRef = ref(null)
  const openAddForm = () => {
    addFormRef.value && addFormRef.value.open();
  }

  const editFormRef = ref(null)
  const openEditForm = (row) => {
    editFormRef.value && editFormRef.value.open(row);
  }
  
  //type：0-全部授权 1-授权通过
  const submit = (type: number, data: any) => {
    const msgLabel = {
      0: "全部授权通过",
      1: "通过"
    }
    ElMessageBox.confirm(
      `确定要${msgLabel[type]}吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(async () => {
      let res = {
        succ: false
      }
      if (type == 0) {
        res = await appBacthPass({})
      }
      if (type == 1) {
        res = await appPass({id: data.id})
      }
      if (res.succ) {
        ElMessage({
          type: 'success',
          message: '操作成功',
        })
        isRefresh.value = true
        nextTick(()=>{
          isRefresh.value = false
        })
      }
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '您已取消操作',
      })
    })
  }

  const handleOk = () => {
    console.log('列表需要刷新');
  }

  const onReset = (row: any) => {
  }

  const go = (path: string) => {
    router.push({ name:path})
  }

  const statusMap = {
    approved: "已通过",
    declined: "已驳回",
    // requesting: "请求中",
  }
  tableConfig.value = {
    // 表格顶部的操作按钮
    'actionBtns': [
      {
        'type': `primary`, // 按钮类型
        'icon': `Plus`, // 按钮上的图标
        label: `新增`, // 按钮展示的文字
        'isRefresh': false, // 执行完事件是否刷新页面
        'btnCallback': openAddForm // 事件回调
      },
    ],
    // 是否隐藏序号列
    'isHiddenIndex': {
      'type': false,
      'required': false,
      'default': false
    },
    'isRefresh': false,
    // 表格展示配置
    'tableHeader': [
      {
        label: '措施名称',
        prop: 'name',
      },
      {
        label: '操作',
        prop: 'id',
        fixed:  'right',
        btns: [
          {
            label: '编辑',
            btnCallback: (row) => {
              openEditForm(row)
            }
          },
          {
            label: '删除',
            btnCallback: () => {
              ElMessageBox.confirm(
                `确定要删除吗？`,
                '提示',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                }
              ).then(async () => {
                let res = {
                  succ: false
                }
                if (type == 0) {
                  res = await appBacthPass({})
                }
                if (type == 1) {
                  res = await appPass({id: data.id})
                }
                if (res.succ) {
                  ElMessage({
                    type: 'success',
                    message: '操作成功',
                  })
                  isRefresh.value = true
                  nextTick(()=>{
                    isRefresh.value = false
                  })
                }
              }).catch(() => {
                ElMessage({
                  type: 'info',
                  message: '您已取消操作',
                })
              })
            }
          }
        ],
        width:'300px'
      },
    ],

  }

  const searchCallback = async () => {
    const params = {
      pageNumber:1,
      pageSize:1000
    }
    try {
      const res = await appAuthList(params)
      let list = res.content.data.requests || []
      console.log('list',list);
      if (!res.succ) {
        return
      }
      list = [
        {"id":7,"name":"产值","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"kwh","description":null,"totalPlanOutput":null,"totalActualOutput":null,"price":34},
        {"id":6,"name":"产值1","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"52","description":"lyj","totalPlanOutput":null,"totalActualOutput":null,"price":520},{"id":5,"name":"产值C","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"kg","description":"产值C","totalPlanOutput":null,"totalActualOutput":null,"price":58.7},{"id":4,"name":"产值B","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"kg","description":"产值B","totalPlanOutput":null,"totalActualOutput":null,"price":65.2},{"id":3,"name":"A类油","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"kg","description":"润滑油工厂-A类油","totalPlanOutput":null,"totalActualOutput":null,"price":75.8},{"id":2,"name":"机组#1-产电","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"MWh","description":"润滑油工厂-产电","totalPlanOutput":null,"totalActualOutput":null,"price":45.6},{"id":1,"name":"机组#1-产热","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"GJ","description":"润滑油工厂-产热","totalPlanOutput":null,"totalActualOutput":null,"price":46.5}];

      return {
        "success": true,
        "message": "string",
        "content": {
          "size": 10,
          "records": list,
          "current": 0,
          "pages": 1,
          "total": 7
        }
      }
    } catch (error) {
      console.log("error", error)
    }

    // return {
    //     "success": true,
    //     "message": "string",
    //     "content": {
    //         "size": 0,
    //         "records": tableData,
    //         "current": 0,
    //         "pages": 0,
    //         "total": 0
    //     },
    //     "options": {
    //         "additionalProp1": {},
    //         "additionalProp2": {},
    //         "additionalProp3": {}
    //     }
    // }
  }

  const created = () => {

  }

</script>
<style lang="scss" scoped>
  .space-auth-container {

  }
</style>
<style lang="scss">
  .space-auth-status-tip {
    max-width: 300px;
  }
  .space-auth-container {
    .auth-list {
      .top {
        padding: 0;
      }
      .tableCon {
        line-height: 20px;
        padding: 15px 0 0 0;
        th {
          background-color: #F3F4F6 !important;
          color: #94979E !important;
        }
      }
      .el-table th.el-table__cell>.cell{
        font-size: 12px !important;
        font-weight: 500;
        color: #94979E;
      }
      .el-table td.el-table__cell>.cell{
        font-size: 13px;
        font-weight: 400;
        color: #343333;
      }
      .el-button.el-button--text {
        font-size: 13px;
        font-weight: 400;
        color: #088D9E;
      }
    }
  }
</style>